<template>
  <div>
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="font-bold">今日客户回访</span>
        </div>
      </template>
      <div class="flex items-center mb-3">
        <el-badge :value="12">
          <el-button type="primary" @click="handleChooseVisit(0)">保险</el-button>
        </el-badge>
        <span class="ml-6">客户保险即将过期,请及时跟进</span>
      </div>
      <div class="flex items-center">
        <el-badge :value="2">
          <el-button type="primary" @click="handleChooseVisit(1)">保养</el-button>
        </el-badge>
        <span class="ml-6">客户下一次保养时间即将来临,请及时跟进</span>
      </div>
    </el-card>
    <el-dialog v-model="dialogVisible" :title="curVisitTitle" width="90%">
      <el-table :data="tableData">
        <el-table-column label="车主姓名" prop="name" width="120" align="center"></el-table-column>
        <el-table-column label="车主电话" prop="phone" width="180" align="center"></el-table-column>
        <el-table-column label="车型" prop="cartype" align="center"></el-table-column>
        <el-table-column label="车牌号" prop="carnumber" width="180" align="center"></el-table-column>
        <el-table-column v-if="curVisitType === 1" label="上次保养时间" prop="pretime" width="180"
          align="center"></el-table-column>
        <el-table-column v-if="curVisitType === 1" label="预计下次保养时间" prop="nexttime" width="180"
          align="center"></el-table-column>
        <el-table-column v-if="curVisitType === 0" label="购买保险时间" prop="buytime" width="180"
          align="center"></el-table-column>
        <el-table-column v-if="curVisitType === 0" label="预计购买保险时间" prop="buycompany" align="center"></el-table-column>
        <el-table-column label="状态" prop="status" align="center">
          <template #default="{ row }">
            <el-tag type="danger">待回访</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="{ row }">
            <el-button type="primary">已回访</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="flex justify-center mt-5" background layout="prev, pager, next" :total="1000" />
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
// 回访具体信息弹框
const dialogVisible = ref(false);
const tableData = ref([
  {
    name: "张三",
    phone: "12345678901",
    cartype: "B-本田｜奥德赛-广州本田｜2.0L-混合动力｜2021｜2021款 2.0L 无级锐智享版",
    carnumber: "粤A12345",
    pretime: "2024-01-01",
    nexttime: "2024-06-01"
  }
]);
const curVisitTitle = ref("");
const curVisitType = ref(0);
// 选择回访类型 0-保险 1-保养
const handleChooseVisit = (type: number) => {
  curVisitType.value = type;
  curVisitTitle.value = type == 0 ? "保险回访" : "保养回访";
  dialogVisible.value = true;
};
</script>
<style scoped lang="scss"></style>
